<template>
  <div class="device-map" id="deviceMap"></div>
</template>
<script>
import AMap from 'AMap'
import DecMap from '../../../src/assets/scripts/plugins/devicemap'
import config from '../../config'

export default {
  name: 'device-map',
  data () {
    return {
      resultata: {},
      deviceName: '',
      deviceState: true,
      deviceItem: null,
      deviceMap: null,
      mapStyle: config.mapStyle
    }
  },
  mounted () {
    let _this = this
    let gWidth = this.$base.getDocumentWidth() - this.$base.getConst('common', 'sidebarWidth')

    let gHeight = this.$base.getDocumentHeight() - this.$base.getConst('common', 'headerHeight')

    this.resultata = {
      'result': {
        'nodes': [
          {
            'equipmentId': '01',
            'equipmentName': '烟感报警',
            'equipmentSrc': '/images/map/map006.png',
            'nodes': [
              {
                'equipmentId': '863703039223248',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '6号非机动车库5',
                'gpsLng': 31.009555,
                'gpsLat': 121.2424,
                'area1': 'D06B1',
                'area2': 'D032',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039258368',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '16号非机动车库2',
                'gpsLng': 31.010434,
                'gpsLat': 121.241791,
                'area1': 'D16B1',
                'area2': 'D045',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039257584',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号非机动车库4',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D12B1',
                'area2': 'D036',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039263764',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '6号非机动车库4',
                'gpsLng': 31.009555,
                'gpsLat': 121.2424,
                'area1': 'D06B1',
                'area2': 'D031',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039257493',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '6号非机动车库2',
                'gpsLng': 31.009555,
                'gpsLat': 121.2424,
                'area1': 'D06B1',
                'area2': 'D029',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039235598',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '6号非机动车库1',
                'gpsLng': 31.009555,
                'gpsLat': 121.2424,
                'area1': 'D06B1',
                'area2': 'D028',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039237065',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号非机动车库5',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D12B1',
                'area2': 'D037',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039153460',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号非机动车库1',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D12B1',
                'area2': 'D033',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039260323',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号3楼右',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D123F',
                'area2': 'D043',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039263418',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '16号非机动车库1',
                'gpsLng': 31.010434,
                'gpsLat': 121.241791,
                'area1': 'D16B1',
                'area2': 'D044',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039260455',
                'equipmentNow': '烟警',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '5号1楼右',
                'gpsLng': 31.009443,
                'gpsLat': 121.242045,
                'area1': 'D051F',
                'area2': 'D023',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039264432',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '5号2楼左',
                'gpsLng': 31.009443,
                'gpsLat': 121.242045,
                'area1': 'D052F',
                'area2': 'D024',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039251371',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '5号3楼左',
                'gpsLng': 31.009443,
                'gpsLat': 121.242045,
                'area1': 'D053F',
                'area2': 'D026',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039229799',
                'equipmentNow': '烟警',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号非机动车库2',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D12B1',
                'area2': 'D034',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039245803',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '5号3楼右',
                'gpsLng': 31.009443,
                'gpsLat': 121.242045,
                'area1': 'D053F',
                'area2': 'D026',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039264580',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '16号非机动车库3',
                'gpsLng': 31.010434,
                'gpsLat': 121.241791,
                'area1': 'D16B1',
                'area2': 'D046',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039145052',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号3楼左',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D123F',
                'area2': 'D042',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039257550',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '6号非机动车库3',
                'gpsLng': 31.009555,
                'gpsLat': 121.2424,
                'area1': 'D06B1',
                'area2': 'D030',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039252130',
                'equipmentNow': '烟警',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '5号1楼左',
                'gpsLng': 31.009443,
                'gpsLat': 121.242045,
                'area1': 'D051F',
                'area2': 'D022',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039218818',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号1楼左',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D121F',
                'area2': 'D038',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039251298',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '5号2楼右',
                'gpsLng': 31.009443,
                'gpsLat': 121.242045,
                'area1': 'D052F',
                'area2': 'D025',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039263012',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号非机动车库3',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D12B1',
                'area2': 'D035',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039217331',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士H5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号1楼右',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D121F',
                'area2': 'D039',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039245100',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士H5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号2楼左',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D122F',
                'area2': 'D040',
                'equipmentType': '烟感'
              },
              {
                'equipmentId': '863703039251207',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能卫士H5',
                'equipmentModel': 'H5-S',
                'equipmentAddr': '12号2楼右',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D122F',
                'area2': 'D041',
                'equipmentType': '烟感'
              }
            ]
          },
          {
            'equipmentId': '02',
            'equipmentName': '智能井盖',
            'equipmentSrc': '/images/map/map007.png',
            'nodes': [
              {
                'equipmentId': '863703032318284',
                'equipmentNow': '正常',
                'equipmentMaker': '铂珏',
                'equipmentName': '井盖开关传感器',
                'equipmentModel': 'BJ-S101',
                'equipmentAddr': '云间名门小区出口处外',
                'gpsLng': 31.00957484677889,
                'gpsLat': 121.24157099999992,
                'area1': 'D020',
                'area2': 'D020',
                'equipmentType': 'well cover'
              },
              {
                'equipmentId': '863703039094870',
                'equipmentNow': '正常',
                'equipmentMaker': '铂珏',
                'equipmentName': '井盖开关传感器',
                'equipmentModel': 'BJ-S101',
                'equipmentAddr': '云间名门出口处内空调外机旁',
                'gpsLng': 31.00957484677889,
                'gpsLat': 121.24157099999992,
                'area1': 'D021',
                'area2': 'D021',
                'equipmentType': 'well cover'
              },
              {
                'equipmentId': '863703039000307',
                'equipmentNow': '正常',
                'equipmentMaker': '铂珏',
                'equipmentName': '井盖开关传感器',
                'equipmentModel': 'BJ-S101',
                'equipmentAddr': '云间名门出口处内空调外机旁',
                'gpsLng': 31.017853847115422,
                'gpsLat': 121.32217599999991,
                'area1': 'D021',
                'area2': 'D021',
                'equipmentType': '井盖'
              }
            ]
          },
          {
            'equipmentId': '03',
            'equipmentName': '消防栓',
            'equipmentSrc': '/images/map/map008.png',
            'nodes': [
              {
                'equipmentId': '863703031849982',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能物联节点',
                'equipmentModel': 'T3',
                'equipmentAddr': '16号楼旁消防栓',
                'gpsLng': 31.010162,
                'gpsLat': 121.242028,
                'area1': 'D070',
                'area2': 'D070',
                'equipmentType': '水压'
              },
              {
                'equipmentId': '869405030104161',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能物联节点',
                'equipmentModel': 'T3',
                'equipmentAddr': '6号楼旁消防栓',
                'gpsLng': 31.009577,
                'gpsLat': 121.242517,
                'area1': 'D072',
                'area2': 'D072',
                'equipmentType': '水压'
              },
              {
                'equipmentId': '863703031867042',
                'equipmentNow': '水压过低',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能物联节点',
                'equipmentModel': 'T3',
                'equipmentAddr': '12号天台',
                'gpsLng': 31.009951,
                'gpsLat': 121.241765,
                'area1': 'D075',
                'area2': 'D075',
                'equipmentType': '水压'
              },
              {
                'equipmentId': '863703031861136',
                'equipmentNow': '水压过低',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能物联节点',
                'equipmentModel': 'T3',
                'equipmentAddr': '6号天台',
                'gpsLng': 31.009555,
                'gpsLat': 121.2424,
                'area1': 'D076',
                'area2': 'D076',
                'equipmentType': '水压'
              },
              {
                'equipmentId': '863703031860955',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能物联节点',
                'equipmentModel': 'T3',
                'equipmentAddr': '地下车库喷淋末端',
                'gpsLng': 31.009584,
                'gpsLat': 121.241963,
                'area1': 'D073',
                'area2': 'D073',
                'equipmentType': '水压'
              },
              {
                'equipmentId': '863703031861607',
                'equipmentNow': '水压过低',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能物联节点',
                'equipmentModel': 'T3',
                'equipmentAddr': '16号天台',
                'gpsLng': 31.010434,
                'gpsLat': 121.241791,
                'area1': 'D074',
                'area2': 'D074',
                'equipmentType': '水压'
              },
              {
                'equipmentId': '863703031880581',
                'equipmentNow': '正常',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能消防栓顶帽',
                'equipmentModel': 'O3',
                'equipmentAddr': '6号楼旁消防栓',
                'gpsLng': 31.009577,
                'gpsLat': 121.242517,
                'area1': 'D071',
                'area2': 'D071',
                'equipmentType': '消防栓帽'
              },
              {
                'equipmentId': '863703032790235',
                'equipmentNow': '门阀位置告警',
                'equipmentMaker': '昊想',
                'equipmentName': '昊想智能消防栓顶帽',
                'equipmentModel': 'O3',
                'equipmentAddr': '16号楼旁消防栓',
                'gpsLng': 31.010162,
                'gpsLat': 121.242028,
                'area1': 'D069',
                'area2': 'D069',
                'equipmentType': '消防栓帽'
              }
            ]
          },
          {
            'equipmentId': '04',
            'equipmentName': '电梯',
            'equipmentSrc': '/images/map/map009.png',
            'nodes': [
              {
                'equipmentId': '868621029217498',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '5号楼3号电梯',
                'gpsLng': 31.02,
                'gpsLat': 121.1352,
                'area1': 'D051',
                'area2': 'D051'
              },
              {
                'equipmentId': '868621029216920',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '5号楼4号电梯',
                'gpsLng': 31.018,
                'gpsLat': 121.1353,
                'area1': 'D052',
                'area2': 'D052'
              },
              {
                'equipmentId': '868621029218330',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '16号楼10号电梯',
                'gpsLng': 31.022,
                'gpsLat': 121.1351,
                'area1': 'D063',
                'area2': 'D063'
              },
              {
                'equipmentId': '868621029218058',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '16号楼9号电梯',
                'gpsLng': 31.027,
                'gpsLat': 121.1346,
                'area1': 'D064',
                'area2': 'D064'
              },
              {
                'equipmentId': '868621029218777',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '15号楼7号电梯',
                'gpsLng': 31.019,
                'gpsLat': 121.1353,
                'area1': 'D061',
                'area2': 'D061'
              },
              {
                'equipmentId': '868621029217852',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '15号楼8号电梯',
                'gpsLng': 31.022,
                'gpsLat': 121.1354,
                'area1': 'D062',
                'area2': 'D062'
              },
              {
                'equipmentId': '868621029218595',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '12号楼5号电梯',
                'gpsLng': 31.021,
                'gpsLat': 121.135,
                'area1': 'D059',
                'area2': 'D059'
              },
              {
                'equipmentId': '868621029219809',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '12号楼6号电梯',
                'gpsLng': 31.022,
                'gpsLat': 121.135,
                'area1': 'D060',
                'area2': 'D060'
              },
              {
                'equipmentId': '863424030865305',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '6号楼1号电梯',
                'gpsLng': 31.025,
                'gpsLat': 121.1356,
                'area1': 'D053',
                'area2': 'D053'
              },
              {
                'equipmentId': '863424030866741',
                'status': '正常',
                'areaId': 46,
                'moduleId': null,
                'equipmentMaker': '虎符智能',
                'equipmentName': '电梯监控智能终端',
                'equipmentModel': 'IF812',
                'equipmentAddr': '6号楼2号电梯',
                'gpsLng': 31.024,
                'gpsLat': 121.1356,
                'area1': 'D054',
                'area2': 'D054'
              }
            ]
          }
        ]
      },
      'code': 0
    }

    this.deviceMap = new DecMap({
      target: '.device-map',
      w: gWidth,
      h: gHeight,
      AMap: AMap,
      mapStyle: _this.mapStyle,
      data: this.resultata,
      deviceName: this.deviceName
    })
    this.deviceMap.init()
  },
  methods: {},
  computed: {
    //  getDeviceName(){
    //    return this.$store.getters.getDeviceName.replace(/(^\s*)|(\s*$)/g, "");
    //  },
    getSingleState () {
      return this.$store.getters.getSingleState
    },
    getDeviceItem () {
      return this.$store.getters.getDeviceItem
    }
  },
  watch: {
    getSingleState () {
      this.deviceMap.showName(this.getDeviceItem.deviceItem)
    }
  }
}
</script>
<style>
  .mapStyle {
    width: 260px;
  }

  .mapStyle h2 {
    font-size: 14px;
    color: #ff6600;
    text-align: center;
  }

  .mapStyle li {
    list-style: none;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    line-height: 30px;
    padding: 2px 0;
  }

  .mapStyle-left {
    float: left;
    text-align: left;
    color: #666;
  }

  .mapStyle-right {
    float: right;
    text-align: right;
    color: #333;
    width: 150px;
  }

  .mapStyle-right .high {
    color: #ff6600;
  }

  .myStyle-img {
    float: left;
    margin-left: 5px;
    width: 56px;
    height: 42px;
    overflow: hidden;
  }

  .myStyle-img img {
    width: 56px;
  }

  .mapStyle a {
    display: block;
    width: 360px;
    height: 40px;
    line-height: 40px;
    background-color: #ff6600;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }

  .mapStyle h2 {
    margin: 0;
  }
</style>
